<template>
  <div
    v-loading="listLoading"
    class="app-container"
  >
    <div class="joe_main">
      <div class="joe_census__filing" style="margin-bottom: 20px">
        <div class="title">
          基本信息
        </div>
        <div class="content">
          <el-row :gutter="40" class="panel-group">
            <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
              <div class="card-panel">
                <div class="card-panel-icon-wrapper icon-people">
                  <el-tooltip class="ants-tooltip">
                    <div slot="content">CPU空闲率</div>
                    <el-progress type="circle" :percentage="cpuData.free"/>
                  </el-tooltip>
                </div>
                <div class="card-panel-description">
                  <div class="card-panel-text">
                    CPU空闲率
                  </div>

                  <span class="card-panel-num">{{ cpuData.free }} %</span>
                </div>
              </div>
            </el-col>
            <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
              <div class="card-panel">
                <div class="card-panel-icon-wrapper icon-money">
                  <el-tooltip class="ants-tooltip">
                    <div slot="content">内存使用率</div>
                    <el-progress type="circle" :percentage="memData.usage" style="width: auto;height: auto;"/>
                  </el-tooltip>
                </div>
                <div class="card-panel-description">
                  <div class="card-panel-text">
                    内存使用率
                  </div>
                  <span class="card-panel-num">{{ memData.usage }} %</span>
                </div>
              </div>
            </el-col>
            <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
              <div class="card-panel">
                <div class="card-panel-icon-wrapper icon-shopping">
                  <el-tooltip class="ants-tooltip">
                    <div slot="content">JVM使用率</div>
                    <el-progress type="circle" :percentage="jvmData.usage"/>
                  </el-tooltip>
                </div>
                <div class="card-panel-description">
                  <div class="card-panel-text">
                    JVM使用率
                  </div>
                  <span class="card-panel-num">{{ jvmData.usage }} %</span>
                </div>
              </div>
            </el-col>
            <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
              <div class="card-panel">
                <div class="card-panel-icon-wrapper icon-message">
                  <el-tooltip class="ants-tooltip">
                    <div slot="content">磁盘使用率</div>
                    <el-progress type="circle" :percentage="usage"/>
                  </el-tooltip>
                </div>
                <div class="card-panel-description">
                  <div class="card-panel-text">
                    磁盘使用率
                  </div>
                  <span class="card-panel-num">{{ usage }} %</span>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>

      <div class="joe_census__filing" style="margin-bottom: 20px">
        <div class="title">
          服务器信息
        </div>
        <div class="content">
          <div class="table-page-search-wrapper">
            <a-form layout="inline">
              <a-row :gutter="24">
                <a-col :xl="12" :lg="12" :md="12" :sm="24">
                  <a-form-item label="服务器名称">
                    {{ sysData.computerName }}
                  </a-form-item>
                </a-col>
                <a-col :xl="12" :lg="12" :md="12" :sm="24">
                  <a-form-item label="操作系统">
                    {{ sysData.osName }}
                  </a-form-item>
                </a-col>
                <a-col :xl="12" :lg="12" :md="12" :sm="24">
                  <a-form-item label="服务器IP">
                    {{ sysData.computerIp }}
                  </a-form-item>
                </a-col>
                <a-col :xl="12" :lg="12" :md="12" :sm="24">
                  <a-form-item label="系统架构">
                    {{ sysData.osArch }}
                  </a-form-item>
                </a-col>

              </a-row>
            </a-form>
          </div>
        </div>
      </div>

      <div class="joe_census__filing" style="margin-bottom: 20px">
        <div class="title">
          Java虚拟机信息
        </div>
        <div class="content">
          <div class="table-page-search-wrapper">
            <a-form layout="inline">
              <a-row :gutter="24">
                <a-col :xl="12" :lg="12" :md="12" :sm="24">
                  <a-form-item label="Java名称">
                    {{ jvmData.name }}
                  </a-form-item>
                </a-col>
                <a-col :xl="12" :lg="12" :md="12" :sm="24">
                  <a-form-item label="Java版本">
                    {{ jvmData.version }}
                  </a-form-item>
                </a-col>
                <a-col :xl="12" :lg="12" :md="12" :sm="24">
                  <a-form-item label="启动时间">
                    {{ jvmData.startTime }}
                  </a-form-item>
                </a-col>
                <a-col :xl="12" :lg="12" :md="12" :sm="24">
                  <a-form-item label="运行时长">
                    {{ jvmData.runTime }}
                  </a-form-item>
                </a-col>
                <a-col :xl="12" :lg="12" :md="12" :sm="24">
                  <a-form-item label="安装路径">
                    {{ jvmData.home }}
                  </a-form-item>
                </a-col>
                <a-col :xl="12" :lg="12" :md="12" :sm="24">
                  <a-form-item label="项目路径">
                    {{ sysData.userDir }}
                  </a-form-item>
                </a-col>
              </a-row>
            </a-form>
          </div>
        </div>
      </div>

      <div class="joe_census__filing" style="margin-bottom: 20px">
        <div class="title">
          磁盘状态
        </div>
        <div class="content">
          <el-table
            :data="sysFileData"
            style="width: 100%;padding-bottom: 20px"
          >
            <el-table-column
              prop="dirName"
              label="盘符路径"
              width="180"
            />
            <el-table-column
              prop="sysTypeName"
              label="文件系统"
              width="180"
            />
            <el-table-column
              prop="typeName"
              label="盘符类型"
            />
            <el-table-column
              prop="total"
              label="总大小"
              width="180"
            />
            <el-table-column
              prop="free"
              label="可用大小"
              width="180"
            />
            <el-table-column
              prop="used"
              label="已用大小"
              width="180"
            />
            <el-table-column
              prop="usage"
              label="已用百分比"
              width="180"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.usage }}%</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <!--      <div class="joe_detail">-->
      <!--        <h2 class="joe_detail__title">基本信息</h2>-->

      <!--        <ul class="joe_census__basic">-->
      <!--          <li class="joe_census__basic-item">-->
      <!--            <div class="joe_census__filing" style="margin-bottom: 20px">-->
      <!--              <div class="title">-->
      <!--                命令统计-->
      <!--              </div>-->
      <!--              <div class="content">-->
      <!--                <div id="command" style="width:100%;height: 400px;"/>-->
      <!--              </div>-->
      <!--            </div>-->
      <!--            <div class="joe_census__filing" style="margin-bottom: 20px">-->
      <!--              <div class="title">-->
      <!--                内存统计-->
      <!--              </div>-->
      <!--              <div class="content">-->
      <!--                <div id="memoryChart" style="width:100%;height: 400px;"/>-->
      <!--              </div>-->
      <!--            </div>-->
      <!--          </li>-->
      <!--        </ul>-->
      <!--      </div>-->
      <!--      <div class="joe_census__filing" style="margin-bottom: 20px">-->
      <!--        <div class="title">-->
      <!--          磁盘状态-->
      <!--        </div>-->
      <!--        <div class="content">-->
      <!--          <a-table-->
      <!--            ref="table"-->
      <!--            row-key="id"-->
      <!--            size="middle"-->
      <!--            :columns="columns"-->
      <!--            :data-source="basicData"-->
      <!--            :pagination="false"-->
      <!--            :loading="loading"-->
      <!--            class="j-table-force-nowrap"-->
      <!--          />-->
      <!--        </div>-->
      <!--      </div>-->
    </div>


    <el-row :gutter="20">
      <el-col :span="12">
        <el-card class="box-card" style="">
          <div slot="header" class="clearfix">
            <span>CPU</span>
          </div>
          <div class="box">
            <span class="cpuTitle1">属性</span>
            <span class="cpuTitle2">值</span>
            <el-divider/>
            <span class="cpuValue1">核心数</span>
            <span class="cpuValue2">{{ cpuData.cpuNum }}</span>
            <el-divider/>
            <span class="cpuValue1">用户使用率</span>
            <span class="cpuValue2">{{ cpuData.used }}%</span>
            <el-divider/>
            <span class="cpuValue1">系统使用率</span>
            <span class="cpuValue2">{{ cpuData.sys }}%</span>
            <el-divider/>
            <span class="cpuValue1">当前空闲率</span>
            <span class="cpuValue2">{{ cpuData.free }}%</span>
            <el-divider/>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>内存</span>
          </div>
          <div class="box">
            <span class="memTitle1">属性</span>
            <span class="memTitle2">内存</span>
            <span class="memTitle3">JVM</span>
            <el-divider/>
            <span class="memValue1">总内存</span>
            <span class="memValue2">{{ memData.total }}G</span>
            <span class="memValue3">{{ jvmData.total }}M</span>
            <el-divider/>
            <span class="memValue1">已用内存</span>
            <span class="memValue2">{{ memData.used }}G</span>
            <span class="memValue3">{{ jvmData.used }}M</span>
            <el-divider/>
            <span class="memValue1">剩余内存</span>
            <span class="memValue2">{{ memData.free }}G</span>
            <span class="memValue3">{{ jvmData.free }}M</span>
            <el-divider/>
            <span class="memValue1">使用率</span>
            <span class="memValue2">{{ memData.usage }}%</span>
            <span class="memValue3">{{ jvmData.usage }}%</span>
            <el-divider/>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {math} from '@/utils/mathjs.js'
import {getAction} from '@/api/manage'

export default {
  name: 'ServiceMonitor',
  data() {
    return {
      listLoading: false,
      usage: 0,
      cpuData: {
        cpuNum: '',
        free: 0,
        sys: 0,
        total: '',
        used: 0,
        wait: ''
      },
      jvmData: {
        free: '',
        home: '',
        max: '',
        name: '',
        runTime: '',
        startTime: '',
        total: '',
        usage: 0,
        used: '',
        version: ''
      },
      memData: {
        total: '',
        used: '',
        free: '',
        usage: 0
      },
      sysData: {
        computerIp: '',
        computerName: '',
        osArch: '',
        osName: '',
        userDir: ''
      },
      sysFileData: []
    }
  },
  mounted() {
    this.getService()
  },
  methods: {
    getService() {
      this.listLoading = true
      getAction('/monitor/server')
        .then((resp) => {
          this.genCpu(resp.result.cpu)
          this.genJvm(resp.result.jvm)
          this.genMem(resp.result.mem)
          this.genSys(resp.result.sys)
          this.genSysFiles(resp.result.sysFiles)
          this.listLoading = false
        })
        .catch((resp) => {
          this.$message.error('加载失败！')
        })
    },
    genCpu(cpu) {
      this.cpuData.cpuNum = cpu.cpuNum
      this.cpuData.free = cpu.free
      this.cpuData.sys = cpu.sys
      this.cpuData.total = cpu.total
      this.cpuData.used = cpu.used
      this.cpuData.wait = cpu.wait
    },
    genJvm(jvm) {
      this.jvmData.free = jvm.free
      this.jvmData.home = jvm.home
      this.jvmData.max = jvm.max
      this.jvmData.name = jvm.name
      this.jvmData.runTime = jvm.runTime
      this.jvmData.startTime = jvm.startTime
      this.jvmData.total = jvm.total
      this.jvmData.usage = jvm.usage
      this.jvmData.used = jvm.used
      this.jvmData.version = jvm.version
    },
    genMem(men) {
      this.memData.total = men.total
      this.memData.used = men.used
      this.memData.free = men.free
      this.memData.usage = men.usage
    },
    genSys(sys) {
      this.sysData.computerIp = sys.computerIp
      this.sysData.computerName = sys.computerName
      this.sysData.osArch = sys.osArch
      this.sysData.osName = sys.osName
      this.sysData.userDir = sys.userDir
    },
    genSysFiles(sysFiles) {
      this.sysFileData = sysFiles
      this.calculationSysFiles(sysFiles)
    },
    calculationSysFiles(sysFiles) {
      let usage = 0
      sysFiles.forEach((item, i) => {
        usage = math.add(usage, item.usage)
      })
      usage = math.divide(usage, sysFiles.length)
      this.usage = usage
    }
  }
}
</script>
<style>
.el-card__header {
  padding: 14px 20px 8px 20px !important;
}

.el-card__body {
  padding: 20px 20px 0px 20px !important;
}
</style>
<style scoped>
.el-divider {
  margin: 10px 0;
  background: 0 0;
  border-top: 1px solid #E6EBF5;
}

.box {
  width: 100%;
  height: 100%;
  /* 设置元素两端对齐 */
  text-align: justify;
}

/* 这里的伪元素一定要加上，不然span元素不能两端对齐 */
.box:after {
  content: "";
  display: inline-block;
  overflow: hidden;
  width: 100%;
}

.cpuTitle1, .cpuTitle2 {
  font-weight: bold
}

.cpuTitle1, .cpuValue1 {
  margin-left: 2%;
  width: 60%;
  /* 设置盒子为行内块 */
  display: inline-block;
}

.cpuValue1, .cpuValue2 {
  font-size: 14px;
}

.memTitle1, .memTitle2, .memTitle3 {
  font-weight: bold
}

.memTitle1, .memValue1, .memTitle2, .memValue2 {
  margin-left: 2%;
  width: 30%;
  /* 设置盒子为行内块 */
  display: inline-block;
}

.memValue1, .memValue2, .memValue3 {
  font-size: 14px;
}

.sysTitle1, .sysValue1 {
  margin-left: 2%;
  width: 20%;
  /* 设置盒子为行内块 */
  display: inline-block;
}

.sysTitle2 {
  margin-left: 20%;
  width: 20%;
  /* 设置盒子为行内块 */
  display: inline-block;
}

.sysValue1, .sysValue2 {
  font-size: 14px;
}
</style>
<style lang="scss" scoped>
.panel-group {
  margin-top: 10px;

  .card-panel-col {
    margin-bottom: 20px;
  }

  .card-panel {
    //height: 108px;
    cursor: pointer;
    font-size: 12px;
    position: relative;
    overflow: hidden;
    color: #666;
    background: #fff;
    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
    border-color: rgba(0, 0, 0, .05);

    &:hover {
      .card-panel-icon-wrapper {
        color: #fff;
      }

      .icon-people {
        background: #40c9c6;
      }

      .icon-message {
        background: #36a3f7;
      }

      .icon-money {
        background: #f4516c;
      }

      .icon-shopping {
        background: #34bfa3
      }
    }

    .icon-people {
      color: #40c9c6;
    }

    .icon-message {
      color: #36a3f7;
    }

    .icon-money {
      color: #f4516c;
    }

    .icon-shopping {
      color: #34bfa3
    }

    .card-panel-icon-wrapper {
      float: left;
      margin: 14px 0 0 14px;
      padding: 16px;
      transition: all 0.38s ease-out;
      border-radius: 6px;
    }

    .card-panel-icon {
      float: left;
      font-size: 48px;
    }

    .card-panel-description {
      float: right;
      font-weight: bold;
      margin: 26px;
      margin-left: 0px;

      .card-panel-text {
        line-height: 18px;
        color: rgba(0, 0, 0, 0.45);
        font-size: 16px;
        margin-bottom: 12px;
      }

      .card-panel-num {
        font-size: 20px;
      }
    }
  }
}

@media (max-width: 550px) {
  .card-panel-description {
    display: none;
  }

  .card-panel-icon-wrapper {
    float: none !important;
    width: 100%;
    height: 100%;
    margin: 0 !important;

    .svg-icon {
      display: block;
      margin: 14px auto !important;
      float: none !important;
    }
  }
}
</style>
